<template>
  <div id="run">
    <span v-show="isShowHint">暂无数据</span>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      deviceName: [],
      seriesConfigList: [],
      isShowHint: false
    };
  },

  methods: {
    getOnlineStatusList(data) {
      if (data.length == 0) {
        this.isShowHint = true;
        return;
      } else {
        this.isShowHint = false;
      }
      this.deviceName = [];
      this.seriesConfigList = [];
      data.forEach((item, index) => {
        this.deviceName.push(item.name);
        this.seriesConfigList.push({
          name: item.name,
          value: item.value
        })
      })
      this.seriesConfigList.sort(function (a, b) {
        return b.value - a.value;
      })
      this.getChartData();
    },

    getChartData() {
      let _this = this;
      var echarts = require("echarts");
      var div = document.getElementById("run");
      var chart = echarts.init(div);

      var colors = [{
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: 'rgba(102,72,255,0.3)' // 0% 处的颜色
        },
          {
            offset: 1,
            color: '#6648FF' // 100% 处的颜色
          }
        ],
        globalCoord: false // 缺省为 false
      }, {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: 'rgba(159,68,219,0.3)' // 0% 处的颜色
        },
          {
            offset: 1,
            color: '#9f44db' // 100% 处的颜色
          }
        ],
        globalCoord: false // 缺省为 false
      }, {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: 'rgba(247,81,127,0.3)' // 0% 处的颜色
        },
          {
            offset: 1,
            color: '#F7517F' // 100% 处的颜色
          }
        ],
        globalCoord: false // 缺省为 false
      }, {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: 'rgba(45,153,255,0.3)' // 0% 处的颜色
        },
          {
            offset: 1,
            color: '#2D99FF' // 100% 处的颜色
          }
        ],
        globalCoord: false // 缺省为 false
      }, {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: 'rgba(63,67,87,0.3)' // 0% 处的颜色
        },
          {
            offset: 1,
            color: '#3F4357' // 100% 处的颜色
          }
        ],
        globalCoord: false // 缺省为 false
      }, {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: 'rgba(40,224,204,0.3)' // 0% 处的颜色
        },
          {
            offset: 1,
            color: 'rgba(40,224,204,1)' // 100% 处的颜色
          }
        ],
        globalCoord: false // 缺省为 false
      }];

      chart.setOption({
        color: colors,
        tooltip: {
          show: true,
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: 'rgba(150,150,150,0.1)'
            }
          },
          padding: [4, 10],
          backgroundColor: "rgba(255 ,255 ,255 ,1)",
          borderColor: "#eee",
          borderWidth: "1",
          textStyle: {
            color: "#666"
          },
          extraCssText: "box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);"
        },
        angleAxis: {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        legend: {
          show: true,
          orient: 'vertical',
          left: '1%',
          top: '2%',
          itemWidth: 22,
          itemHeight: 14,
          itemGap: 10,
          textStyle: {
            fontSize: 13,
            color: '#5c5c5c'
          },
          data: this.deviceName
        },
        calculable: true,
        radiusAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          center: ["65%", "50%"]
        },
        series: [
          {
            name: '设备在线',
            type: 'pie',
            label: {
              normal: {
                show: false,
                formatter: '{b} \n  {c} ({d}%)',
                textStyle: {
                  fontSize: 14,
                  color: '#2e95f3'
                }
              }
            },
            radius: ["50%", '90%'],
            center: ['74%', '50%'],
            roseType: 'area',
            data: this.seriesConfigList
          }
        ]
      });
    }
  }
};
</script>

<style  scoped>
#run {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #aaaaaa;
}
</style>
